<template>
    <div class="com-container">
        <div class="title" :style="com_Style">
            <span>| {{ showTitle }}</span>
            <span
                class="iconfont title-icon"
                @click="showChoice = !showChoice"
                :style="com_Style"
                >&#xe6eb;</span
            >
            <div class="selection-con" v-if="showChoice" :style="marginStyle">
                <div
                    class="selection-item"
                    v-for="(item, index) in selectTypes"
                    :key="item.key"
                    @click="handleSelect(item.key)"
                >
                    {{ item.text }}
                </div>
            </div>
        </div>
        <div class="com-chart" ref="trand_ref"></div>
    </div>
</template>

<script>
import { computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
import useChartTest from "../hooks/useChart";
import SocketService from "@/utils/socket_service";
import * as echarts from "echarts";
//vuex
import { useStore } from "vuex";
import { getThemeValue } from "@/utils/theme_utils";

export default {
    name: "Trend",
    setup() {
        const trand_ref = ref(null);
        const showChoice = ref(false);
        const choiceType = ref("map");
        const titleFontSize = ref(0);

        const useChart = () => {
            let allData = ref(null);
            let chartInstance = null;
            //初始化
            const initChart = () => {
                //挂载chart
                chartInstance = echarts.init(trand_ref.value, theme.value); //主题
                /** @type EChartsOption */
                const initOption = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                        },
                    },
                    grid: {
                        left: "10%",
                        top: "35%",
                        bottom: "10%",
                        right: "10%",
                        containLabel: true,
                    },
                    legend: {
                        left: 20,
                        top: "15%",
                        icon: "circle",
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false, //图表与轴间是否需要间隔
                    },
                    yAxis: {
                        type: "value",
                    },
                };
                chartInstance.setOption(initOption);
            };
            //获取数据
            const getData = async (ret) => {
                // 获取数据
                // const { data: ret } = await inject("http").get("api/trend");
                allData.value = ret;
                console.log(allData.value);
                upDateChart();
            };
            //更新数据
            const upDateChart = () => {
                const colorArr1 = [
                    "rgba(11, 168, 44, 0.5)",
                    "rgba(44, 110, 255, 0.5)",
                    "rgba(22, 242, 217, 0.5)",
                    "rgba(254, 33, 30, 0.5)",
                    "rgba(250, 105, 0, 0.5)",
                ];
                // 全透明的颜色值
                const colorArr2 = [
                    "rgba(11, 168, 44, 0)",
                    "rgba(44, 110, 255, 0)",
                    "rgba(22, 242, 217, 0)",
                    "rgba(254, 33, 30, 0)",
                    "rgba(250, 105, 0, 0)",
                ];
                //处理数据
                const timeArrName = allData.value.common.month; //类目轴的数据
                const valueArr = allData.value[choiceType.value].data; // y轴的数据
                const seriesArr = valueArr.map((item, index) => {
                    //系列数据
                    return {
                        name: item.name,
                        type: "line",
                        data: item.data,
                        stack: choiceType.value, //堆叠图
                        areaStyle: {
                            //颜色渐变方式填充
                            color: {
                                type: "linear ", // linear 线性渐变  radial径向渐变
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: colorArr1[index], // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: colorArr2[index], // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    };
                });
                const legendArr = valueArr.map((item) => {
                    //图例数据
                    return item.name;
                });
                const dataOption = {
                    legend: {
                        data: legendArr,
                    },
                    xAxis: {
                        data: timeArrName,
                    },
                    series: seriesArr,
                };
                chartInstance.setOption(dataOption);
            };

            // 响应式适配
            const screenAdapt = () => {
                titleFontSize.value = trand_ref.value.offsetWidth * (60 / 1536);
                /** @type EChartsOption */
                const adaptOption = {
                    legend: {
                        itemWidth: titleFontSize.value,
                        itemHeight: titleFontSize.value,
                        itemGap: titleFontSize.value,
                        textStyle: {
                            fontSize: titleFontSize.value,
                        },
                    },
                };
                chartInstance.setOption(adaptOption);
                chartInstance.resize();
            };

            //响应式文字的样式
            const com_Style = computed(() => {
                return {
                    fontSize: `${titleFontSize.value}px`,
                    color: getThemeValue(theme.value).titleColor,
                };
            });

            //边距
            const marginStyle = computed(() => {
                return {
                    marginLeft: `${titleFontSize.value}px`,
                };
            });

            onMounted(() => {
                initChart();
                // getData();
                // 发送数据给服务器
                SocketService.Instance.send({
                    action: "getData",
                    socketType: "trendData",
                    chartName: "trend",
                    value: "",
                });
                window.addEventListener("resize", screenAdapt);
                screenAdapt();
            });
            onUnmounted(() => {
                window.removeEventListener("resize", screenAdapt);
            });

            //更换主题
            const store = useStore();
            const theme = computed(() => {
                return store.state.theme;
            });
            watch(theme, () => {
                console.log("主题切换了");
                chartInstance.dispose(); //销毁当前图表
                initChart();
                SocketService.Instance.send({
                    action: "getData",
                    socketType: "trendData",
                    chartName: "trend",
                    value: "",
                });
                console.log(theme.value);
            });

            return {
                upDateChart,
                allData,
                com_Style,
                marginStyle,
                getData,
                screenAdapt,
                theme,
            };
        };
        const {
            upDateChart,
            allData,
            com_Style,
            marginStyle,
            getData,
            screenAdapt,
            theme,
        } = useChart();

        //回调函数注册
        SocketService.Instance.registerCallBack("trendData", getData);
        onUnmounted(() => {
            SocketService.Instance, unRegisterCallBack("trendData");
        });

        //下拉框标题
        const selectTypes = computed(() => {
            if (!allData.value) {
                return [];
            } else {
                return allData.value.type.filter((item) => {
                    return item.key !== choiceType.value;
                });
            }
        });

        const showTitle = computed(() => {
            if (!allData.value) {
                return "";
            } else {
                return allData.value[choiceType.value].title;
            }
        });

        const handleSelect = (key) => {
            console.log(123);
            console.log(key);
            console.log(allData.value.map);
            choiceType.value = key;
            upDateChart();
            showChoice.value = false;
        };

        //#region
        // const { initChart, getData, upDateChart, screenAdapt, allData } =
        //     useChartTest();
        // const initOption = {};
        // const adaptOption = {};
        // onMounted(() => {
        //     initChart(trand_ref.value, initOption);
        //     getData("api/trend", () => {});
        //     window.addEventListener("resize", screenAdapt);
        //     screenAdapt(adaptOption)
        //     console.log(allData);
        // });
        // onUnmounted(() => {
        //     window.removeEventListener("resize", screenAdapt);
        // });
        //#endregion

        return {
            allData,
            trand_ref,
            selectTypes,
            showChoice,
            handleSelect,
            choiceType,
            showTitle,
            com_Style,
            marginStyle,
            screenAdapt,
            theme,
        };
    },
};
</script>

<style lang="scss" scoped>
.title {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
    z-index: 10;
    .title-icon {
        margin-left: 10px;
        cursor: pointer;
    }
    .selection-con {
        background-color: #222733;
        cursor: pointer;
    }
}
</style>